<template>
  <div>
    <el-form
      ref="formRef"
      :model="model"
      label-position="left"
      :disabled="disabled"
      :rules="rules"
    >
      <el-form-item label="名称" :label-width="labelWidth" prop="name">
        <el-input
          v-model="model.name"
          placeholder="请输入名称"
          maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>

      <el-form-item label="主计量单位" :label-width="labelWidth" prop="unit">
        <el-input v-model="model.unit" placeholder="请输入单位" />
      </el-form-item>

      <el-form-item v-if="!isEdit" label="辅助单位" :label-width="labelWidth" prop="unitList">
        <el-button v-if="!isEdit" type="text" @click="handleOpenDialog">
          {{ auxiliaryUnitTitle }}
        </el-button>
      </el-form-item>

      <!--      <el-form-item label="是否父类型" :label-width="labelWidth" prop="is_directory">-->
      <!--        <el-radio-group v-model="model.is_directory">-->
      <!--          <el-radio :label="1">是</el-radio>-->
      <!--          <el-radio :label="0">否</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

      <!--      <template v-if="model.is_directory === 0">-->

      <!--        <el-form-item label="父级类型" :label-width="labelWidth" prop="parent_id">-->
      <!--          <el-cascader-->
      <!--            v-model="model.parent_id"-->
      <!--            :options="goodsTypeList"-->
      <!--            :props="{ value: 'id', label: 'name', checkStrictly: true }"-->
      <!--            clearable-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </template>-->

      <el-form-item label="备注" :label-width="labelWidth" prop="remark">
        <el-input
          v-model="model.remark"
          type="textarea"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <AuxiliaryUnitDialog
      :visible.sync="visible"
      :unit-list="model.unitList"
      :is-edit="isEdit"
      @confirm="handleConfirm"
    />
  </div>
</template>
<script>
import AuxiliaryUnitDialog from '@/views/officeSuppliesManagement/components/AuxiliaryUnitDialog.vue'
export default {
  name: '',
  components: {
    AuxiliaryUnitDialog
  },
  props: {
    model: {
      type: Object,
      default: () => ({})
    },

    goodsTypeList: {
      type: Array,
      default: () => []
    },

    disabled: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      labelWidth: '100px',
      rules: {
        name: [{ required: true, message: '请输入类型名称', trigger: ['change', 'blur'] }],
        unit: [{ required: true, message: '请输入单位名称', trigger: ['change', 'blur'] }],
        parent_id: [
          {
            validator: (rule, value, callback) => {
              if (!value) return callback()
              const id = value[value.length - 1]
              if ((this.model.id && id === this.model.id) || this.isIllegalParentId(id)) {
                callback(new Error('请选择正确的父类型'))
              }

              callback()
            }
          }
        ]
      },
      visible: false
    }
  },
  computed: {
    auxiliaryUnitTitle() {
      const len = this.model?.unitList?.length
      return len > 0 ? `已设置${len}个辅助单位` : '设置'
    },
    isEdit() {
      return !!this.model.id
    }
  },
  methods: {
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(flag => {
          resolve(flag)
        })
      })
    },

    resetFields() {
      this.$refs.formRef.resetFields()
    },

    findCurrentNode(id, list) {
      for (const currentNode of list) {
        if (currentNode.id === id) {
          return currentNode // 返回包含该 id 的节点
        }

        if (currentNode.children && currentNode.children.length > 0) {
          const foundItem = this.findCurrentNode(id, currentNode.children)

          if (foundItem) {
            return foundItem // 返回包含该 id 的子节点
          }
        }
      }

      return []
    },

    findIdInTree(id, currentNode) {
      // 检查当前节点的 id 是否等于给定的 id
      if (currentNode.id === id) {
        return true // 找到匹配的 id，返回 true
      }

      // 检查当前节点的子节点
      if (currentNode.children && currentNode.children.length > 0) {
        for (const child of currentNode.children) {
          if (this.findIdInTree(id, child)) {
            return true // 找到匹配的 id 或其子节点，返回 true
          }
        }
      }

      return false // 如果没有找到匹配的 id，返回 false
    },

    isIllegalParentId(id) {
      if (!id) return false
      const res = this.findCurrentNode(this.model.id, this.goodsTypeList)
      console.log('res --------->', res)
      return this.findIdInTree(id, res)
    },

    handleOpenDialog() {
      this.visible = true
    },

    handleConfirm(e) {
      this.model.unitList = e
    },

    handleClose(item, index) {

    }
  }
}
</script>
<style lang="scss" scoped>
</style>
